<template>
	<view class="income">
		<view class="nav_bar" style="background: linear-gradient( 179deg, #D5BBFF 0%, #E7DBFD 100%);">
			<uni-nav-bar color="#333" left-icon="left" title="游戏统计" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>

		<view class="card flex_center">
			<view class="item">
				<text>今日完成人数</text>
				<view>60/100</view>
			</view>
			<view class="item">
				<text>总局数(局)</text>
				<view>60</view>
			</view>
			<view class="item">
				<text>奖励(元)</text>
				<view>234234</view>
			</view>
		</view>

		<view class="date flex_r_between">
			<view class="item" :id="type == 0 ? 'select' : ''" @click="onType(0)">
				今日
			</view>
			<view class="item" :id="type == 1 ? 'select' : ''" @click="onType(1)">
				本周
			</view>
			<view class="item" :id="type == 2 ? 'select' : ''" @click="onType(2)">
				上周
			</view>
		</view>

		<view class="table">
			<view class="header flex_center">
				<view class="th">昵称</view>
				<view class="th">玩游戏人数</view>
				<view class="th">游戏局数(局)</view>
			</view>

			<view class="tr flex_center" v-for="(item,index) in list" :key="index">
				<view class="th">韩梅梅</view>
				<view class="th">1</view>
				<view class="th">{{item.game_num}}</view>
			</view>
		</view>

		<view class="page">
			<page-pagination v-show="total != 0" :total="total" mode="multi" color="#6B37E2"
				@change="change"></page-pagination>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 今日：0
				// 本周：1
				// 上周：2
				type: 0,

				page: 1,
				total: 0,
				list: [],
			}
		},
		methods: {
			onType(e) {
				this.type = e;
			},

			getList() {
				this.$get('/v2.guild_data/getGiftLog', {
					page: this.page,
					// 1 礼物 2,3游戏
					order_type: 1,
				}).then(res => {
					this.total = res.data.total;
					this.list = [];
					this.list.push(...res.data.data);
				})
			}
		},

		onLoad() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.income {
		min-height: 100vh;
		background: linear-gradient(179deg, #D5BBFF 0%, #E7DBFD 16%, #F2F2F5 100%);
		padding: 20rpx 32rpx;
	}

	.card {
		background: linear-gradient(41deg, #E470FF 0%, #F3D7FF 100%), linear-gradient(41deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.62) 100%);
		box-shadow: inset 0rpx -8rpx 0rpx 0rpx #EA9FFF;
		border-radius: 32rpx;
		padding: 40rpx 24rpx;

		.item {
			flex: 1;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}

			view {
				font-weight: 600;
				font-size: 48rpx;
				color: #FFFFFF;
			}
		}

	}

	.date {
		margin: 24rpx 0;

		.item {
			width: 216rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999999;
			line-height: 64rpx;
			border: 2rpx solid transparent;
		}

		#select {
			border: 2rpx solid #6B37E2;
			color: #6B37E2;
		}
	}

	.table {
		border-radius: 24rpx;
		overflow: hidden;

		.header {
			background: linear-gradient(113deg, #AF65FF 0%, #6A83FF 100%);
			height: 64rpx;

			.th {
				flex: 1;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
			}
		}

		.tr {
			height: 80rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #FFCFED;

			.th {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
			}

		}
	}

	.page {
		margin-top: 60rpx;
	}
</style>